<div class="yl2-content">
  <div class="alert" style="border-color: #45aaf8">
    <div class="proc-info-item" style="height: 22px !important">
      <span
        class="m-badge m-badge--success"
        style="padding: 2px 20px !important"
        >优先级：{{ youxianji }}</span
      >
      <span
        class="m-badge m-badge--info"
        style="margin-left: 10%; padding: 2px 20px !important"
        >是否需要试胎：{{ lastremark }}</span
      >
    </div>
  </div>

  <h5 class="mb-4"><i class="fa fa-cubes"></i> 物料需求信息</h5>
  <div
    *ngFor="let bill of bills"
    class="m-demo"
    data-code-preview="true"
    data-code-html="true"
    data-code-js="false"
  >
    <div class="m-demo__preview text-center" style="padding: 10px">
      <div class="row">
        <div class="col-md-2">
          <small class="text-muted">任务编号</small>
          <h6 style="margin-top: 10px">{{ subTaskCode }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">工艺规程编号</small>
          <h6 style="margin-top: 10px">{{ bill.techDocCode }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">投产数量</small>
          <h6 style="margin-top: 10px">{{ bill.amountPlanned }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">牌号</small>
          <h6 style="margin-top: 10px">{{ bill.paiHao }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">是否试胎</small>
          <h6 style="margin-top: 10px">{{ bill.isManyTimesOut }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">是否为半成品</small>
          <h6 style="margin-top: 10px">{{ bill.isBanChengPin }}</h6>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-md-2">
          <small class="text-muted">物资名称</small>
          <h6 style="margin-top: 10px">{{ bill.materialName }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">材料/产品</small>
          <h6 style="margin-top: 10px">{{ bill.productAmount }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">规格</small>
          <h6 style="margin-top: 10px">{{ bill.materialSpec }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">尺寸</small>
          <h6 style="margin-top: 10px">{{ bill.materialSize }}</h6>
        </div>
        <div class="col-md-2">
          <small class="text-muted">备注</small>
          <h6 style="margin-top: 10px">{{ bill.remark }}</h6>
        </div>
      </div>
    </div>
  </div>

  <div
    class="primeng-datatable-container"
    [busyIf]="primengTableHelper.isLoading"
  >
    <div *ngIf="outs.length" class="mb-4">
      <h5 class="mb-4"><i class="fa fa-list"></i> 出库信息</h5>
      <p-table
        [value]="outs"
        rows="10"
        [paginator]="false"
        [scrollable]="true"
        ScrollWidth="100%"
        [responsive]="primengTableHelper.isResponsive"
        [resizableColumns]="primengTableHelper.resizableColumns"
      >
        <ng-template pTemplate="header">
          <tr>
            <th width="80px">出库数量</th>
            <th width="120px">出库位置</th>
            <th *ngFor="let col of selectedColumns" width="{{ col.width }}">
              {{ col.header }}
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-record>
          <tr>
            <th width="80px">{{ record.quantity }}</th>
            <th width="120px">{{ record.locationName }}</th>
            <td *ngFor="let col of selectedColumns" width="{{ col.width }}">
              {{ record[col.field] }}
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>

    <h5 class="mb-4"><i class="fa fa-table"></i> 材料信息</h5>
    <p-table
      #dataTable
      (onLazyLoad)="getCharges($event)"
      [value]="charges"
      rows="5"
      [paginator]="false"
      [lazy]="true"
      dataKey="id"
      [scrollable]="true"
      ScrollWidth="100%"
      [responsive]="primengTableHelper.isResponsive"
      [resizableColumns]="primengTableHelper.resizableColumns"
    >
      <ng-template pTemplate="caption">
        <div class="row align-items-center m--margin-bottom-10">
          <div class="col-xl-4" style="text-align: left">
            <p-multiSelect
              [options]="cols"
              [(ngModel)]="selectedColumns"
              optionLabel="header"
              selectedItemsLabel="已选择 {0} 列"
              [style]="{ padding: 0 }"
              defaultLabel="Choose Columns"
            ></p-multiSelect>
          </div>
          <div class="col-xl-8">
            <div class="form-group m-form__group align-items-center mb-0">
              <div class="input-group">
                <input
                  class="form-control m-input"
                  autofocus
                  type="text"
                  name="filterText"
                  [(ngModel)]="filterText"
                  placeholder="搜索..."
                  style="width: auto"
                />
                <button
                  class="btn btn-success btn-sm"
                  type="button"
                  (click)="getCharges()"
                >
                  搜索
                </button>
              </div>
            </div>
          </div>
        </div>
      </ng-template>
      <ng-template pTemplate="header">
        <tr>
          <th style="width: 25px"></th>
          <th width="80px">库存总量</th>
          <th *ngFor="let col of selectedColumns" width="{{ col.width }}">
            {{ col.header }}
          </th>
        </tr>
      </ng-template>
      <ng-template
        pTemplate="body"
        let-record="$implicit"
        let-expanded="expanded"
      >
        <tr>
          <td style="width: 25px">
            <a href="javascript:;" [pRowToggler]="record">
              <i
                [ngClass]="
                  expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'
                "
              ></i>
            </a>
          </td>
          <th width="80px">{{ record.canUsedQuantity }}</th>
          <td *ngFor="let col of selectedColumns" width="{{ col.width }}">
            {{ record[col.field] }}
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="rowexpansion" let-record>
        <tr>
          <td [attr.colspan]="selectedColumns.length + 2">
            <p-table [value]="record.materialChargeDetails">
              <ng-template pTemplate="header">
                <tr>
                  <th width="100px">出库</th>
                  <th width="80px">可用数量</th>
                  <th width="200px">位置</th>
                  <th></th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-rowData>
                <tr>
                  <th width="100px">
                    <button
                      type="button"
                      class="btn btn-success btn-sm"
                      (click)="
                        yl2OutModal.show(pipe.id, record.id, rowData.positionId)
                      "
                    >
                      出库
                    </button>
                  </th>
                  <td width="80px">{{ rowData.canUsedQuantity }}</td>
                  <td width="200px">{{ rowData.locationName }}</td>
                  <td></td>
                </tr>
              </ng-template>
            </p-table>
          </td>
        </tr>
      </ng-template>
    </p-table>
    <div
      class="primeng-no-data"
      *ngIf="primengTableHelper.totalRecordsCount == 0"
    >
      没有找到适合的材料
    </div>
    <div class="primeng-paging-container">
      <p-paginator
        rows="5"
        #paginator
        (onPageChange)="getCharges($event)"
        [totalRecords]="primengTableHelper.totalRecordsCount"
        [rowsPerPageOptions]="[5]"
      >
      </p-paginator>
      <span class="total-records-count">
        总计：{{ primengTableHelper.totalRecordsCount }}
      </span>
    </div>
  </div>
  <yl2OutModal #yl2OutModal (modalSave)="reloadPage()"></yl2OutModal>
</div>
